.vui-scroll{
    width:100%;
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    &:hover{
        .vui-scroll-bar{
            background-color: rgba(0,0,0,0.2);
            &.vui-scroll-bar-light{
                background-color: rgba(255,255,255,0.2);
            }
        }
    }
    &.vui-scroll-scrolling{
        .vui-scroll-bar{
            background-color: rgba(0,0,0,0.5);
            &.vui-scroll-bar-light{
                background-color: rgba(255,255,255,0.5);
            }
        }
    }
    .vui-scroll-bar{
        border-radius: .03rem;
        background-color: rgba(0,0,0,0.1);
        position: absolute;
        cursor: pointer;
        // z-index: 999;
        transition: background ease-in .2s ,width ease-in .3s ,height ease-in .3s;
        &.vui-scroll-bar-light{
            background-color: rgba(255,255,255,0.1);
        }
        &:hover{
            background-color: rgba(0,0,0,0.3);
            &.vui-scroll-bar-light{
                background-color: rgba(255,255,255,0.3);
            }
        }
        &:active{
            background-color: rgba(0,0,0,0.5);
            &.vui-scroll-bar-light{
                background-color: rgba(255,255,255,0.5);
            }
        }
        &.vui-scroll-bar-vertical{
            width: .06rem;
            min-height: .2rem;
            right: 0;
        }
        &.vui-scroll-bar-horizontal{
            height: .06rem;
            min-width: .2rem;
            bottom: 0;
        }
    }
    .ui-scroll-content{
        overflow: visible;
    }
}